<template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="showDialog"
      :title="dialogTitle"
      class="dialog-component"
      :visible.sync="showDialog"
      width="500px"
      @close="closeDialog(0)"
    >
      <el-form
        ref="formInfo"
        :model="formInfo"
        class="demo-form-inline"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="用户名:" prop="customerId">
          <el-input v-model="formInfo.customerId" disabled></el-input>
        </el-form-item>
        <el-form-item label="图书名" prop="bookName">
          <el-input v-model="formInfo.bookName" disabled></el-input>
        </el-form-item>
        <el-form-item label="价格(元):" prop="price">
          <el-input v-model="formInfo.price" disabled></el-input>
        </el-form-item>
        <el-form-item label="数量:" prop="orderNumber">
          <el-input-number v-model="formInfo.orderNumber" :min="1" :max="999" title="请输入数量!"></el-input-number>
          本
        </el-form-item>
        <el-form-item label="总价(元):" prop="money">
          <el-input v-model=formInfo.price*formInfo.orderNumber disabled></el-input>
        </el-form-item>
        <el-form-item label="日期:" prop="date">
          <el-input v-model="formInfo.date" disabled></el-input>
        </el-form-item>
        <el-form-item label="地址:" prop="address">
          <el-input v-model="formInfo.address"></el-input>
        </el-form-item>
        <el-form-item label="电话:" prop="phoneNumber">
          <el-input v-model="formInfo.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="快递:" prop="deliveryId">
          <el-select style="width: 100%" v-model="value" placeholder="请选择快递类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="submitForm('formInfo')"
          >确定</el-button
          >
          <el-button @click="closeDialog(0)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>

<script>
  export default {
    name: "DialogComponent",
    props: {
      dialogTitle: {
        type: String,
        default: "添加人员",
      },
      itemInfo: {
        type: Object,
        default: function () {
          return {};
        },
      },
    },
    data() {
      return {
        showDialog: false,
        formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
        options: [{
          value: '1',
          label: '韵达快递'
        }, {
          value: '2',
          label: '天天快递'
        }, {
          value: '3',
          label: '申通快递'
        }, {
          value: '4',
          label: '圆通快递'
        }, {
          value: '5',
          label: '中通快递'
        }, {
          value: '6',
          label: '京东物流'
        }, {
          value: '7',
          label: '顺丰速运'
        }, {
          value: '8',
          label: '宅急送'
        }, {
          value: '9',
          label: '百世汇通'
        }, {
          value: '10',
          label: '顺捷丰达'
        }
        ],
        value: '1',
        bill: {
          customerId: '',
          bookId:'',
          bookName: '',
          price: '',
          orderNumber: '',
          money: '',
          date:'',
          address:'',
          phoneNumber:'',
          deliveryId:''
        },
        rules: {
          address:[{required: true, message: '地址不能为空', trigger: 'blur'}],
          phoneNumber:[{required: true, message: '电话号码不能为空', trigger: 'blur'}],
        },
      };
    },
    methods: {
      // 保存操作
      submitForm(formName) {
        this.$refs.formInfo.validate(valid => {
          if (valid) {
            if (this.formInfo.bnumber < this.formInfo.orderNumber) {
              this.$alert("库存不足!", '提示', {
                confirmButtonText: '确定'
              });
            } else {
              this.$confirm('是否确认购买?', '提示', {}).then(() => {
                this.bill = {
                  customerId: this.formInfo.customerId,
                  bookId: this.formInfo.bookId,
                  bookName: this.formInfo.bookName,
                  price: this.formInfo.price,
                  orderNumber: this.formInfo.orderNumber,
                  money: this.formInfo.price*this.formInfo.orderNumber,
                  date: this.formInfo.date,
                  address: this.formInfo.address,
                  phoneNumber: this.formInfo.phoneNumber,
                  deliveryId: this.value
                };
                this.$axios
                  .post('/money/order', this.bill)
                  .then(resp => {
                    if (resp.data.code == 200) {
                      this.$alert("购买成功!", '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                          this.closeDialog(1);
                        }
                      });
                    } else {
                      this.$alert(resp.data.msg, '提示', {
                        confirmButtonText: '确定'
                      });
                    }
                  })
              }).catch(() => {
                this.closeDialog(0);
              });
            }
          }
           else {
            // eslint-disable-next-line no-console
            console.log("参数验证不合法！");
            return false;
          }
        });
      },
      // 关闭弹框
      closeDialog(flag) {
        this.$refs["formInfo"].resetFields();
        this.showDialog = false;
        this.$emit("closeDialog", flag);
      },
    },
  };
</script>

<style scoped>
  .dialog-fade-enter-active {
    -webkit-animation: dialog-fade-in 0.3s;
    animation: dialog-fade-in 0.3s;
  }
  .dialog-fade-leave-active {
    -webkit-animation: dialog-fade-out 0.3s;
    animation: dialog-fade-out 0.3s;
  }
  @-webkit-keyframes dialog-fade-in {
    0% {
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes dialog-fade-in {
    0% {
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-webkit-keyframes dialog-fade-out {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
      opacity: 0;
    }
  }
  @keyframes dialog-fade-out {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
      opacity: 0;
    }
  }
  .el-input.is-disabled /deep/ .el-input__inner {
    color: #000000;
  }
</style>
